<template>
    <div>
        <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">

            <!-- 动态生成表格列 -->
            <el-table-column v-for="column in Columns" :key="column.prop" :label="column.label" :prop="column.prop"
                :width="column.width" :fixed="column.fixed" :sortable="column.sortable" :show-overflow-tooltip="true">
                <!-- 自定义列内容 -->
                <!-- <template v-if="column.type === 'custom'">
                    <slot :name="column.prop" />
                </template> -->

                <!-- 自定义图片
                :zoom-rate="1.2" -- 缩放速度
                :preview-src-list="[scope.row.url]" -- 开启预览
                hide-on-click-modal="true" -- 随意点击取消预览
                preview-teleported="true" -- 预览置于body 之上
                -->
                <template v-if="column.type === 'url'" #default="scope">
                    <div style="display: flex; align-items: center;">
                        <el-image v-if="scope.row.url" :zoom-rate="1.2" :src="scope.row.url"
                            :preview-src-list="[scope.row.url]" fit="cover" :hide-on-click-modal="true"
                            :preview-teleported="true" style="width: 50px; height: 50px; border-radius: 50%;" />
                    </div>
                </template>
            </el-table-column>
            <!-- 固定在右侧的操作列 -->
            <el-table-column fixed="right" label="操作">
                <!-- 行级别操作按钮 -->
                <template v-if="enableRowActions" #default="scope">
                    <el-button v-for="(item,index) in buttonData" :disabled="isLoading" :key="index" :type="item.type" v-loading.fullscreen.lock="isLoading" @click="debouncedClick(scope.row, item.id)">{{ item.name }}</el-button>
                </template>
            </el-table-column>


        </el-table>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue';
import { ElLoading } from 'element-plus';

let enableRowActions = ref(true)

// let tableData = ref([])
// 接收数据
const props = defineProps({
    tableData: {
        type: Array,
        required: true
    },
    buttonData: {
        type: Array,
        required: true
    },
    Columns: {
        type: Array,
        required: true,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    enableRowActions: {
        type: Boolean,
        default: false
    }
})

onMounted(() => {
    // 1秒之后执行
    // setTimeout(() => {
    //     loading.value = !loading.value;
    // }, 1000);
})





// 防抖函数
let isLoading = ref(false); // 禁用
function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        isLoading.value = true;

        // ElementPlus 组件
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })

        timer = setTimeout(() => {
            isLoading.value = false;
            loading.close();
            func.apply(this, args);
        }, delay);
    };
}
// 防抖参数
const debouncedClick = debounce(handleRow, 300);

// 根据按钮类型判断业务类型
function handleRow(row, id) {
    switch (id) {
        case 1:
            handleRowEdit(row);
            break;
        case 2:
            handleRowDelete(row);
            break;
        case 3:
            handleRowEdit(row);
            break;
        case 4:
            handleRowEdit(row);
            break;
        default:
            break;
    }
}

// 处理行编辑逻辑
function handleRowEdit(row) {
    // ...
    console.log("输出编辑的数据  ", row.name);
}
// 处理行删除逻辑
function handleRowDelete(row) {
    // ...
    console.log("输出删除的数据  ", row);
}

</script>


<style></style>
  
